<template>
  <div class="padding text-sm">
    <el-row
      :gutter="10"
      type="flex"
      class="flex-wrap"
      style="margin-top:-13px;"
    >
      <el-col :lg="24" :md="24">
        <el-card class="margin-bottom">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">基础信息</span>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row :gutter="5">
              <el-col :span="5">
                <span>运单号：{{ seaairWaybill.waybillNo }}</span>
              </el-col>
              <el-col :span="5">
                <span>原单号：{{ seaairWaybill.referenceNo }}</span>
              </el-col>
              <el-col :span="5">
                <span>追踪号：{{ seaairWaybill.trackNumber }}</span>
              </el-col>
              <el-col :span="5">
                <span>渠道转单号：{{ seaairWaybill.trackNumber2 }}</span>
              </el-col>
              <el-col :span="4">
                <span>袋号：{{ seaairWaybill.outStockPlanNumber }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="5">
                <span>国家：{{ seaairWaybill.countryId }}</span>
              </el-col>
              <el-col :span="5">
                <span
                  >客户预报重(KG)：{{
                    seaairWaybill.customerActualWeight
                  }}</span
                >
              </el-col>
              <el-col :span="5">
                <span>件数：{{ seaairWaybill.customerTotalPackages }}</span>
              </el-col>
              <el-col :span="5">
                <span>运费：{{ seaairWaybill.expectFreight }}</span>
              </el-col>
              <el-col :span="4">
                <span>关税支付方式：{{ seaairWaybill.deliveryTerms }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="5">
                <span>申报总价：{{ seaairWaybill.totalDeclareValue }}</span>
              </el-col>
              <el-col :span="5">
                <span>币种：{{ seaairWaybill.declareValueCurrency }}</span>
              </el-col>
              <el-col :span="5">
                <span>出实重(KG)：{{ seaairWaybill.inStockActualWeight }}</span>
              </el-col>
              <el-col :span="5">
                <span>体重量(KG)：{{ seaairWaybill.inStockVolumeWeight }}</span>
              </el-col>
              <el-col :span="4">
                <span
                  >计费重(KG)：{{ seaairWaybill.inStockChargedWeight }}</span
                >
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="5">
                <span>产品名称：{{ seaairWaybill.inStockChannel }}</span>
              </el-col>
              <el-col :span="5">
                <span>渠道名称：{{ seaairWaybill.outStockChannel }}</span>
              </el-col>
              <el-col :span="5">
                <span>下家：{{ seaairWaybill.serviceCompanyId }}</span>
              </el-col>
              <el-col :span="5">
                <span>收货时间：{{ seaairWaybill.inStockTime }}</span>
              </el-col>
              <el-col :span="4">
                <span>出货日期：{{ seaairWaybill.outStockTime }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="5">
                <span>客户：{{ seaairWaybill.customerId }}</span>
              </el-col>
              <el-col :span="5">
                <span>特殊备注：{{ seaairWaybill.customerRemark }}</span>
              </el-col>
              <el-col :span="5">
                <span>出货备注：{{ seaairWaybill.innerRemark }}</span>
              </el-col>
              <el-col :span="5">
                <span>起运地：{{ seaairWaybill.loadingPort }}</span>
              </el-col>
              <el-col :span="4">
                <span>&nbsp;</span>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="2" type="flex" class="flex-wrap" style="margin-top:-25px;">
      <el-col :lg="12" :md="24">
        <el-card class="margin-bottom">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">发件人</span>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row :gutter="5">
              <el-col :span="24">
                <span>公司：{{ seaairWaybill.senderCompanyCN }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <span>联系人：{{ seaairWaybill.senderLinkMan }}</span>
              </el-col>
              <el-col :span="8">
                <span>电话：{{ seaairWaybill.senderPhone }}</span>
              </el-col>
              <el-col :span="8">
                <span>邮编：{{ seaairWaybill.senderZipCode }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="24">
                <span>地址：{{ seaairWaybill.senderAdress }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="24">
                <span>&nbsp;</span>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <el-col :lg="12" :md="24">
        <el-card class="margin-bottom">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">收件人</span>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row :gutter="5">
              <el-col :span="24">
                <span>公司：{{ seaairWaybill.dispatcher }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <span>联系人：{{ seaairWaybill.dispatchLinkMan }}</span>
              </el-col>
              <el-col :span="16">
                <span>电话：{{ seaairWaybill.dispatchPhone }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="8">
                <span>州/省：{{ seaairWaybill.dispatchProvince }}</span>
              </el-col>
              <el-col :span="8">
                <span>城市：{{ seaairWaybill.dispatchCity }}</span>
              </el-col>
              <el-col :span="8">
                <span>邮编：{{ seaairWaybill.dispatchZipCode }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="16">
                <span>地址：{{ seaairWaybill.dispatchAddress }}</span>
              </el-col>
              <el-col :span="8">
                <span>收件人税号：{{ seaairWaybill.recoveManTaxNO }}</span>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="margin-bottom" style="margin-top:-25px;">
      <div slot="header" class="clearfix relative">
        <div class="title-icon">
          <span>产品信息</span>
          <span></span>
        </div>
      </div>
      <el-table :data="liquidationInvoice" border style="width: 100%">
        <el-table-column prop="sku" label="sku" width="180"> </el-table-column>
        <el-table-column prop="declareNameCn" label="中文品名" width="180">
        </el-table-column>
        <el-table-column prop="declareNameEn" width="120" label="英文品名">
        </el-table-column>
        <el-table-column prop="customsCode" width="120" label="海关编码">
        </el-table-column>
        <el-table-column prop="num" width="120" label="数量"> </el-table-column>
        <el-table-column prop="declareValue" width="120" label="申报单价">
        </el-table-column>
        <el-table-column prop="purchasingPrice" width="120" label="单价">
        </el-table-column>
      </el-table>
    </el-card>
    <div style="margin-left:-15px;width:101.5%;margin-top:-25px;">
      <Receivable
        :verifyShow="verifyShow"
        :Constatvariable="seaairWaybill"
        :initOptionsData="initOptionsData"
      ></Receivable>
    </div>

    <div style="margin-left:-15px;width:101.5%;margin-top:-25px;">
      <Amoeba
        :Constatvariable="seaairWaybill"
        :verifyShow="verifyShow"
      ></Amoeba>
    </div>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import Receivable from "./../alledit/components/Receivable";
import Amoeba from "./../alledit/components/Amoeba";

export default {
  components: {
    Receivable,
    Amoeba
  },
  data() {
    return {
      //sku信息
      initOptionsData: {},
      verifyShow: {},
      liquidationInvoice: [],
      seaairWaybill: {},
      isNotOptions: {
        1: "是",
        0: "否"
      },
      airline: [],
      //渠道下拉
      stockChannelOptions: {},
      //国家下拉
      countryOptions: {},
      //港口下拉
      configPortOptions: {},
      //航空公司下拉
      airlineOptions: {},
      //船公司
      configShipOptions: {},
      //服务商
      serviceCompanyOptions: {},
      state4: "",
      timeout: null
    };
  },
  props: ["data"],
  methods: {
    async init() {
      // this.getProgress(); //轨迹条初始化
      var param = {};
      const waybillId = this.$route.query.pid;
      param["id"] = waybillId;
      if (waybillId) {
        this.$router.push({
          query: {
            waybillId: waybillId
          }
        });
      }
      param["param1"] = this.$route.query.waybillNo;
      const initData = await ajax("getAllOptions", param);
      if (initData) {
        this.initOptionsData = initData.data;
        this.showWaybillDetails = true;
      } else {
        console.log("查询下拉接口出错 请检查接口");
      }
    },

    // 初始化 运单数据
    verifyPermissions() {
      var param = {};
      param["type"] = 1;
      ajax("verifyPermissions", param).then(
        res => {
          this.verifyShow = res;
        },
        error => {
          console.log(error);
        }
      );
    },

    initPacketData() {
      var param = {};
      var waybillId = this.$route.query.pid;
      if (waybillId) {
        this.$router.push({
          query: {
            waybillId: waybillId
          }
        });
      } else {
        waybillId = this.$route.query.waybillId;
      }
      console.log("localData:", waybillId);
      param["id"] = waybillId;
      ajax("initPacketData", param).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            this.seaairWaybill = res.data;
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  },
  mounted() {
    this.initPacketData();
    this.verifyPermissions();
    this.init();
  }
};
</script>

<style scoped>
/deep/ .el-row {
  margin-bottom: 20px;
}
.border-lr {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
<style>
.handsontable th {
  background: #fff;
  color: #2c3e50;
  text-align: left;
  font-weight: bold;
}

.el-card__body {
  color: #606266;
}
.handsontable th:first-child,
.handsontable th:nth-child(2),
.handsontable td:first-of-type,
.handsontable tr th,
.handsontable tr td,
.handsontable tr:first-child th,
.handsontable tr:first-child td {
  border-color: #ebeef5;
}
</style>
